<template>
  <div class="home">
    <gltitle :is_mt="true" :is_notice="false" :is_back="true" :is_name="true" :title="title"></gltitle>

    <div class="container">

      <div class="assets">
        <div class="n">{{ $t('page4.doc8') }}(USDT)</div>
        <div class="am">{{ userData.pendingIncome }}</div>
        <!--        <div class="icon">-->
        <!--          <img src="../../assets/images/Group39.png" alt="">-->
        <!--        </div>-->
      </div>
      <div class="cname">
        <div>{{ $t('page.待释放资金描述') }}</div>
      </div>

      <!-- <div class="record_hdrecord_hd db" style="justify-content:flex-end">
        <div class="flexs list_title">{{ $t('page4.doc34') }}</div>
      </div> -->
      <div class="rules-info" v-html="tipsInfo.description">

      </div>
      <!-- <div style="margin-top: .32rem; margin-bottom: 1rem;"> -->
      <!-- <ul class="list"> -->
      <!-- <li>
              <div class="lists1">
                <img class="p1" src="../../assets/images/Group40.png" alt="">
                <div class="title">{{ $t('page4.doc35') }}</div>

              </div>
              <div class="lists2">
                <img class="p2" src="../../assets/images/Group43.png" alt="">
              </div>
              <div class="lists1">
                <img class="p1" src="../../assets/images/Group41.png" alt="">
                <div class="title">{{ $t('page4.doc37') }}</div>
              </div>
              <div class="lists2">
                <img class="p2" src="../../assets/images/Group43.png" alt="">
              </div>
              <div class="lists1">
                <img class="p1" src="../../assets/images/Group42.png" alt="">
                <div class="title">{{ $t('page4.doc38') }}</div>

              </div>
          </li>
          <li>
              <div class="icon">
                <img src="../../assets/images/Group44.png" alt="">
              </div>
              <div class="name">
                <div class="time">
                  <div>{{ $t('page4.doc8') }}：</div>
                  <p>{{ $t('page4.doc40') }}</p>
                </div>
              </div>
          </li>
          <li>
              <div class="icon">
                <img src="../../assets/images/Group45.png" alt="">
              </div>
              <div class="name">
                <div class="time">
                  <div>{{ $t('page4.doc41') }}</div>
                  <p>{{ $t('page4.doc411') }}</p>
                  <p>{{ $t('page4.doc412') }}</p>
                </div>
              </div>
          </li> -->
      <!-- </ul> -->
      <!-- </div> -->

    </div>
  </div>

</template>
<script>

export default {

  data() {
    return {
      title: this.$t('page4.doc8'),
      tipsInfo: {}
    };
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  mounted() {
    this.getTipsInfo()
  },
  filters: {
    Svalues(value) {
      if (value) {
        return Number(value.toString().match(/^\d+(?:\.\d{0,2})?/));
      }
    }
  },
  methods: {
    async getTipsInfo() {
      const url = this.URL.home.article
      const params = { categoryType: 'DECAYREWARDRULES' }
      const res = await this.$post(url, params)
      if (res.code != 0) return;
      this.tipsInfo = res.data
    }
  },
};
</script>

<style lang="less" scoped>
/deep/ .head {
  background: transparent !important;
  height: 1.4rem;
  display: flex;
  align-items: center;
}

.home {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
}

.cname {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: .32rem;
  padding: .24rem 0;
  border-bottom: 0.02rem solid #38d28f;

  img {
    width: 60px;
  }
}

.assets {
  text-align: center;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000;
  background: url("../../assets/images/sfCardBg.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 0.2rem;
  margin-top: 0.25rem;
  overflow: hidden;
  margin-bottom: 10px;
  height: 2.26rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding-bottom: 0.1rem;

  .n {
    font-family: Source Han Sans SC;
    font-weight: 400;
    font-size: 0.28rem;
    color: #FFFFFF;
  }

  .am {
    font-family: OPPOSans;
    font-weight: 800;
    font-size: 0.64rem;
    color: #8BFFC2;
  }

  .set {
    background: #8d551f;
    padding: 12px 0;
    margin-top: 30px;

    button {
      // flex: 1;
      height: 0.64rem;
      font-size: 0.28rem;
      flex: 1;
      border: none;
    }
  }
}


.record_hdrecord_hd {
  margin-top: .36rem;

  .flex1 {
    font-size: .32rem;
    font-weight: 500;
    color: #ffffff;
    line-height: .42rem;
    white-space: nowrap
  }

  .set {
    background: url("../../assets/images/ico_la.png") no-repeat right center;
    background-size: .16rem auto;
    padding-right: .3rem;
    margin-left: .5rem;
    font-size: .24rem;
  }
}

.itemBox {
  margin-top: .3rem;
  margin-bottom: 1rem;

  li {
    border-bottom: .02rem solid #47464a;
    padding: 0 0 .2rem 0;
    margin-bottom: .2rem;

    &:last-child {
      margin-bottom: 0;
      border: 0;
      padding-bottom: 0;
    }

    .s {
      text-align: right;
    }

    .time {
      font-size: .24rem;
    }
  }
}

.footer_but {
  position: fixed;
  bottom: 0;
  left: auto;
  max-width: 10rem;
  width: 100%;
  background: #2B2B37;

  .fo {
    display: flex;

    .item {
      font-size: .32rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .28rem 0rem;

      img {
        height: .4rem;
        margin-right: .08rem;
      }
    }

    .item:first-child {
      border-right: .02rem solid #474652;
    }
  }
}

.rules-info {
  margin: .32rem 0;
  padding: .3rem .32rem;
  border-radius: .24rem;
  background: url("../../assets/images/infoBg.png") no-repeat;
  background-size: 100% 100%;
  min-height: 8rem;

  :deep(p) {
    height: inherit;

    img {
      max-width: 100%;
      height: inherit !important;
    }
  }

}

.list_title {
  color: #FFC9A8;
  text-align: center;
  font-family: PingFang HK;
  font-size: .36rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
</style>
